/*
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-08-29 10:59:23
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-22 09:37:24
 * @FilePath: \ft-apply-admin\src\directives\auth.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/**
 * Global authority directive
 * Used for fine-grained control of component permissions
 * @Example v-auth="'btn'" menuType == 4
 */
import type { App, Directive, DirectiveBinding } from 'vue';
import { nextTick } from 'vue';

import { usePermission } from '@/hooks/web/usePermission'

async function isAuth(el: Element, binding: any) {
  const { hasBtnPermission } = usePermission();
  // console.log(el,'===>el')
  const value = binding.value
  if (!value) return

  if (!hasBtnPermission(value)) {
    await nextTick()  //解决在重定向时报错，造成页面无法跳转
    if (el && el.parentNode) {
      if (isButtonElement(el)) {  //判断是否为按钮
        // el.style.pointerEvents = 'none'; // 禁止点击
        // el.style.opacity = '0.5'; // 置灰效果
        // el.style.cursor = 'not-allowed';
        el.disabled = true
      } else {
        el.parentNode?.removeChild(el)
      }
    }
  }

}
function isButtonElement(element) {
  return element instanceof HTMLButtonElement;
}

function mounted(el: Element, binding: DirectiveBinding<any>) {
  if (el) {
    isAuth(el, binding)
  }
}

const authDirective: Directive = {
  mounted,
}

export function setupPermissionDirective(app: App<Element>) {
  app.directive('auth', authDirective)
}

export default authDirective
